<template>
    <div class="systemrole">
        <div class="search">
            <span style="padding-right:15px;">角色名</span>
            <input type="text" v-model="roleInput" placeholder="请输入角色名" style="margin-right:15px;">
            <span class="my-btn my-back-blue" @click="getroleData">查询</span>
            <span class="my-btn my-back-gray" @click="emptySearch">重置</span>
            <span class="my-btn my-back-green" @click="addrole">新增角色</span>
        </div>
        <el-table :data="roleData" border style="width:100%;">
            <el-table-column prop="roleId" label="角色id" width="260"></el-table-column>
            <el-table-column prop="roleName" label="角色名称"></el-table-column>
            <el-table-column prop="roleDescribe" label="角色描述"></el-table-column>
            <el-table-column label="操作" width="260">
                <template slot-scope="scope">
                    <span style="color:#007bff;padding:0 6px;" @click="editorClick(scope.row)">编辑</span>
                    <span style="color:#007bff;padding:0 6px;" @click="deleClick(scope.row.roleId)">删除</span>
                    <span style="color:#007bff;padding:0 6px;" @click="distribution(scope.row.roleId)">分配权限</span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="currentPage"  :page-sizes="[5, 10, 15, 20]"  layout="total, sizes, prev, pager, next, jumper"  :total="total"></el-pagination>
        <div class="mask" v-if="maskNum" >
            <div class="window">
                <div class="window-top">
                    <h3><span v-if="!editNum">新增</span><span v-else>编辑</span>角色</h3>
                    <span @click="down">x</span>
                </div>
                <div class="window-content">
                    <div class="content">
                        <span>角色名称</span>
                        <input type="text" v-model="addroleData.roleName">
                        <p v-if="roleName">请输入角色名称</p>
                    </div>
                    <div class="content">
                        <span>角色描述</span>
                        <input type="text"  v-model="addroleData.roleDescribe">
                    </div>
                </div>
                <div style="text-align:center;">
                    <span class="my-btn my-btn-blue" style="padding:8px 30px;" type="primary" @click="submit()">提交</span>
                </div>
            </div>
        </div>
        <!-- 分配权限 -->
        <el-dialog  :visible.sync="dialogVisible"  title="分配权限"  center  :close-on-click-modal="false">
            <el-form :model="activityObj" label-width="80px" label-position="left">
                <el-form-item label="权限列表">
                    <el-tree ref="treeBox"  :check-strictly="checkStrictly" :data="permissionsList"  show-checkbox  highlight-current node-key="permissionId" :default-expand-all="true"  :props="props"  @check-change="handleCheckChange" />
                </el-form-item>
            </el-form>
            <div style="text-align: center">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmRole">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            roleName:false,//角色名称
            roleInput:'',//搜索角色
            roleData:[],//角色数据
            addroleData:{//新增角色数据
                "roleDescribe": "",
	            "roleName": ""
            },
            editNum:0,//0--新增，1--编辑
            page:1,//第几页
            pageSize:6,//每页几条
            currentPage:1,//跳转到第几页
            total:0,//总共几条
            maskNum:false,//控制弹窗弹出--编辑-新增
            permissionsList:[],//全部菜单列表
            dialogVisible: false,
            checkStrictly: true,
            roleId:null,
            activityObj: {
                ids: [],
            },
            treeList:[],
            props: {
                children: "childs",
                label: "permissionName",
            },
        }
    },
    watch: {
        //弹窗验证 角色名称
        'addroleData.roleName'(val) {
            if(val !== '') {
                this.roleName = false 
            }
        }
    },
    mounted(){
        this.getroleData()
    },
    methods:{
        //获取角色数据
        getroleData(){
            var param={
                "page": this.page,
                "pageSize": this.pageSize,
                "search":this.roleInput
            }
            this.axios({
                url: "/role/getAll",
                method: "post",
                data: JSON.stringify(param),
            }).then(res=>{
                this.roleData=res.data.data.list
                this.total=res.data.data.total
                console.log('获取角色数据',res)
            })
        },
        //打开分配权限弹窗
        distribution(id){
            this.dialogVisible = true;
            this.maskNum2=true
            this.getRolePermission(id)
        },
        //获取权限
        getRolePermission(id){
            this.roleId=id
            this.axios({
                url:'/role/getRolePermission',
                method:'post',
                data:JSON.stringify({
	                "roleId": id
                })
            }).then(res=>{
                if(res.data.code===""){
                    this.permissionsList = res.data.data.permissions;
                    this.$nextTick(() => {
                        this.$refs.treeBox.setCheckedKeys(res.data.data.ids);
                    });
                }
            })
        },
        // 获取选中的ID
        handleCheckChange(data, checked, indeterminate) {
            const res = this.$refs.treeBox.getCheckedNodes();
            this.treeList = res;
        },
        // 提交
        confirmRole() {
            const arr = [];
            this.treeList.forEach((v, i) => {
                arr.push(v.permissionId);
            });
            this.axios({
                url:'/role/distribution',
                method:'post',
                data:JSON.stringify({
	                roleId: this.roleId,
                    permissionIds: arr,
                })
            }).then(res=>{
                if(res.data.code===""){
                    this.$message.success("分配成功");
                    this.dialogVisible = false;
                    this.roleId = null;
                }
            })
        },
        //编辑
        editorClick(row){
            this.editNum=1
            this.maskNum=true
            this.addroleData=row
        },
        //新增角色
        addrole(){
            this.editNum=0
            this.maskNum=true
        },
        //提交
        submit(){
            if(this.addroleData.roleName === '') {
                this.roleName = true
                return
            }
            if(this.editNum){
                var msg='修改'
                var url="/role/update"
            }else{
                var msg='添加'
                var url="/role/save"
            }
            this.$confirm('是否'+msg+'该角色', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var param=this.addroleData
                this.axios({
                    url: url,
                    method: "post",
                    data: JSON.stringify(param),
                }).then(res=>{
                    this.$message({
                        type: 'success',
                        message: msg+'成功!'
                    });
                    this.down()
                    this.getroleData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消添加'
                });          
            });
        },
        //关闭
        down(){
            this.maskNum=false
            this.roleName = false
            this.addroleData={
                "roleDescribe": "",
	            "roleName": ""
            }
        },
        //重置
        emptySearch(){
            this.roleInput=''
            this.getroleData()
        },
        //删除角色
        deleClick(id){
            this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var param={
                    "roleId":id
                }
                this.axios({
                    url: "/role/delete",
                    method: "post",
                    data: JSON.stringify(param),
                }).then(res=>{
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getroleData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
            
        },
        //当每页显示条数变化时触发
        handleSizeChange(val){
            this.pageSize=val
            this.getroleData()
        },
        //当页数变化时触发
        handleCurrentChange(val){
            this.page=val
            this.getroleData()
        },
    },
}
</script>

<style scoped>
.search{
    padding-left: 10px;
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
}
.my-btn{
    padding:8px 15px ;
    margin-left: 10px;
    border: 0;
}
.my-btn-blue{
    color: #fff;
    background: #007bff;
}
.my-back-blue{
    color: #007bff;
    background: #007bff2d;
}
.my-back-gray{
    color: #62676d;
    background: #62676d1e;
}
.my-back-green{
    color: #3dc015;
    background: #3dc01518;
}
/* 弹窗开始 */
.mask{
    width:100vw;
    height: 100vh;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    background: rgba(65, 60, 60, 0.555);
}
.window{
    width: 460px;
    min-height: 280px;
    border-radius: 5px;
    background: #fff;
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 30px;
}
/* 弹窗头 */
.window-top{
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}
.window-top h3{
    font-weight: 400;
}
/* 弹窗主体内容 */
.window-content{
    margin: 50px 0;
}
.window-content .content{
    text-align: center;
    margin-bottom: 30px;
}
.window-content .content span{
    padding-right: 16px;
}
.window-content .content input{
    width: 280px;
}
.window-content .content p{
    text-align: center;
    color: red;
}
/* 弹窗结束 */
</style>